<template>
  <div class="me">
    
    <div class="bgme">
      <div class="photo"> <a-avatar :size="90" icon="user" /></div>
      <div class="name">
       <h2>姓名</h2>
       <p>签名</p>
      </div>
    
    </div>
  
   <div class="content">
     <router-view></router-view>
      <money :contents="contents"></money>

    
   </div>
   <div class="commonly-service">
        <b>常用功能</b>
        <service v-for="(item, index) in datas" :key="index" :serviceInfo="item">

        </service>
      </div>
  </div>
</template>

<script>
import addressUrl from "../assets/imgs/service/address.png";
import folderUrl from "../assets/imgs/service/folder.png";
import attentionUrl from "../assets/imgs/service/attention.png";
import customerServiceUrl from "../assets/imgs/service/customerService.png";
import legalUrl from "../assets/imgs/service/legal.png";
import Service from "../components/Service.vue";
import Money from "../components/Money"
export default {

    components:{Service,Money},
data() {
  return {
     datas: [
        {
          imgUrl: addressUrl,
          name: "地址管理",
          path: "Address",
        },
        {
          imgUrl: folderUrl,
          name: "个人资料",
          path: "Address",
        },
        {
          imgUrl: attentionUrl,
          name: "关注公众号",
          path: "Address",
        },
        {
          imgUrl: customerServiceUrl,
          name: "在线客服",
          path: "Address",
        },
        {
          imgUrl: legalUrl,
          name: "条款政策",
          path: "Address",
        },
      ],
      contents:[
        {
        icon:"icon-qianbao",
        name:"钱包",
        path:'/'
        },
         {
        icon:"icon-jifenshangcheng",
        name:"积分商城",
        path:'/'
        },
         {
        icon:"icon-qiaquan",
        name:"券",
        path:'/'
        }
      ]
  }
},
}

</script>
<style lang="scss" scoped>
.me{
  width: 100%;
  height: 100%;
  background: $bg-color;
  

  .bgme{
    width: 100%;
    height: 13rem;
    background-image: url("https://pic3.zhimg.com/80/v2-e7db30eb088b7fa00f588b8522da179a_1440w.jpg");
     background-repeat: no-repeat;
    background-size: cover;
     display: flex;
    justify-content: space-around;
    align-items:  flex-end;

    .photo{

      flex: 1;
      margin-bottom: -3rem;
      margin-left: 1rem;
    
    }
    .name{
       flex: 2;
       margin-bottom: -2.7rem;
       background-color: rgba($color:#ccc,$alpha:0.1);
      

    }
   
  }
  
.content{
 height: 11rem;
 width: 100%;
}
  
 .commonly-service {
    padding: $common-padding;
    background: $module-color;
    border-radius: $common-border-radius;
    margin:$common-margin;
  }

}
</style>